<!-- 分类 -->
<template>
  <div>
    <!-- 搜索框 -->
    <van-search v-model="value" shape="round" placeholder="请输入搜索关键词" />
    <div class="main_box">
      <!-- 左边侧栏 -->
      <van-sidebar v-model="activeKey" @change="onChange">
        <van-sidebar-item
          :title="item.name"
          v-for="item in categoryListArr"
          :key="item.id"
        />
      </van-sidebar>
      <!-- 右边分类 -->
      <div class="right">
        <img :src=" currentCategory.banner_url" alt="" height="140px"/>
        <van-grid :column-num="3">
          <van-grid-item
            v-for="item in subCategoryList"
            :key="item.id"
            :icon="item.wap_banner_url"
            :text="item.name"
          />
        </van-grid>
      </div>
    </div>
  </div>
</template>

<script>
import { CategoryList, CategoryCurrentList } from '@/https/https';

export default {
  // name: '21181224Category',

  data() {
    return {
      value: "",            //搜索数据
      categoryListArr: [],  //所有分类数据
      currentCategory: [],  //当前分类数据
      activeKey: 0,         //侧边栏
      subCategoryList:[],        

    }
  },

  created() {
      CategoryList().then((res) => {
          console.log(res);
          this.categoryListArr = res.data.data.categoryList;
          this.currentCategory = res.data.data.currentCategory;
          this.subCategoryList = this.currentCategory.subCategoryList;

      })
  },

  methods: {
      onChange(index) {
          this.activeKey = index;
        //当前分类数据的赋值   
          console.log(this.categoryListArr[index]);
          let id = this.categoryListArr[index].id
           CategoryCurrentList({id: id}).then((res) => {
              console.log(res);
              this.currentCategory = res.data.data.currentCategory;
              this.subCategoryList = this.currentCategory.subCategoryList;
          })
    },
  }
};
</script>

<style lang="less">
.main_box {
  width: 100%;
  display: flex;
  .right{
    flex:1;
      img {
          width: 95%;
      }
  }
}
</style>